<!-- 热门模块 -->
<template>
  <div class="hot">
    <!-- 轮播图 -->
    <div class="swiper-container" v-if="homeCarouseList.length>0">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in homeCarouseList" :key="item.id">
          <img :src="item.imgurl" alt="">
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <!-- 中部导航组件 -->
    <hot-nav></hot-nav>
    <!-- 广告位 -->
    <div class="hotad">
      <img src="../../../../assets/images/center_banner.jpeg" alt="" width="100%">
    </div>
    <!-- 商品列表组件 -->
    <hot-show-list></hot-show-list>
  </div>
</template>

<script>
// 1. 引入swiper相关
import Swiper from 'swiper/dist/js/swiper.min.js'
import 'swiper/dist/css/swiper.min.css'
// 引入居中导航组件
import HotNav from '../Hot/Hot_Nav.vue'
// 商品展示页
import HotShowList from '../Hot/HotShowList.vue'
// 取数据，开始动态的渲染数据
import { mapState } from 'vuex'
export default {
  data () {
    return {

    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    // 执行axios 获取轮播图数据函数
    this.$store.dispatch('resHomeCarousel')
    // 执行axios 获取导航数据函数
    this.$store.dispatch('reshomeIconNav')
    // 获取商品列表
    this.$store.dispatch('resProductIist')
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    // eslint-disable-next-line no-new

  },
  methods: {
  },
  components: {
    HotNav,
    HotShowList
  },
  computed: {
    ...mapState(['homeCarouseList'])
  },
  watch: {
    homeCarouseList () {
      this.$nextTick(() => {
        // eslint-disable-next-line no-new
        new Swiper('.swiper-container', {
          autoplay: true,
          loop: true, // 循环模式选项
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination'
          }
        })
      })
    }
  }
}
</script>
<style lang='stylus' scoped>
/* @import url(); 引入css类 */
.hot {
  padding-top: 2.9125rem;
  width: 100%;
  heihgt: auto;
  background: #f5f5f5;
  display: flex;
  z-index: 996;
  flex-direction: column;
}

.swiper-container {
  width: 100%;
  height: 8.7875rem;
  padding-top 0.3125rem;
  img {
    width: 100%;
  }
}
</style>
